<script setup lang="ts">
import {NModal, NForm, NButton, NSpace} from 'naive-ui'
import type {FormInst, FormRules} from 'naive-ui'
import {ref, computed} from 'vue'

defineOptions({name: 'BaseFormModal'})

const props = defineProps<{
  show: boolean
  title: string
  model: any
  rules?: FormRules
  width?: string | number
  loading?: boolean
}>()

const emit = defineEmits<{
  'update:show': [show: boolean]
  'submit': [model: any]
  'cancel': []
}>()

const formRef = ref<FormInst | null>(null)

// 处理模态框显示状态
const modalShow = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value)
})

// 提交表单验证
const handleSubmit = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      emit('submit', props.model)
    } else {
      window.$message?.error('请填写完整信息')
    }
  })
}

// 取消操作
const handleCancel = () => {
  emit('cancel')
  modalShow.value = false
}
</script>

<template>
  <n-modal
    v-model:show="modalShow"
    :title="title"
    preset="card"
    :draggable="true"
    :style="{ width: width || '600px' }"
    class="base-form-modal"
    :mask-closable="false"
    transform-origin="mouse"
  >
   
    <n-form
      ref="formRef"
      :model="model"
      :rules="rules"
      label-placement="left"
      :label-width="88"
      require-mark-placement="right-hanging"
    >
      <slot/>
    </n-form>

    <template #footer>
      <n-space justify="end" :size="16">  <!-- 增加按钮间距 -->
        <n-button size="medium" @click="handleCancel">取消</n-button>
        <n-button
          size="medium"
          type="primary"
          @click="handleSubmit"
          :loading="loading"
        >
          确认
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped>
/* ================= 样式优化要点 ================= */
.base-form-modal {
  /* 卡片整体边距 */

  :deep(.n-card) {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  /* 头部样式 */

  :deep(.n-card-header) {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* 更柔和的边框颜色 */
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85); /* 加深标题颜色 */
  }

  /* 内容区域 */

  :deep(.n-card__content) {
    padding: 24px;
    margin-top: 8px; /* 与标题保持间距 */

    /* 表单元素统一间距 */

    .n-form-item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    /* 输入框样式 */

    .n-input, .n-select {
      border-radius: 6px;
      transition: border-color 0.2s ease;

      &:hover {
        border-color: rgba(0, 0, 0, 0.3);
      }
    }
  }

  /* 底部操作区域 */

  :deep(.n-card__footer) {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02); /* 浅灰色背景 */
  }

  /* 错误提示样式 */

  :deep(.n-form-item-feedback-wrapper) {
    margin-top: 6px;
    font-size: 13px;
    color: #d03050; /* 错误提示红色 */

    /* 错误输入框高亮 */

    .n-form-item-blank--error {
      .n-input, .n-select {
        border-color: #d03050 !important;
        background: rgba(208, 48, 80, 0.02);
      }
    }
  }
}

/* ================= 按钮样式优化 ================= */
:deep(.n-button) {
  min-width: 88px; /* 统一按钮最小宽度 */
  transition: all 0.2s ease;
  border-radius: 6px;

  /* 主按钮悬停效果 */

  &--primary-type {
    &:not(:disabled):hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
  }

  /* 取消按钮样式 */

  &--default-type {
    color: rgba(0, 0, 0, 0.65);
    border-color: rgba(0, 0, 0, 0.15);

    &:hover {
      background: rgba(0, 0, 0, 0.02);
    }
  }
}
</style>
